<template>
    <div>
        <div style="margin-bottom: 20px">
            <el-input type="text" placeholder="添加大数据人才种类" class="search" size="small" v-model="input1" style="border-radius: 4px; width:400px; left: 5%"></el-input>
            <el-button icon="search" type="primary" content="添加" class="button" @click="addCity" size="small" style="position: relative; left: 6%">添加</el-button>
        </div>
        <div style="margin-bottom: 20px">
            <div style="position:relative;left:5%;background: white;width:90%;margin-bottom: 10px; border-radius: 3px; border-left: 10px">
                <el-checkbox-group style="text-color:red" v-model="checkedCities1" :min="1">
                    <el-checkbox  color="red" v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <el-button icon="search" type="primary" content="提交" class="button" @click="getData3" size="small" style="position: relative; left: 5%">提交</el-button>
        </div>
        <div id="interestpie"></div>
    </div>
</template>
<script>
    import echarts from 'echarts';
    import '*/../../node_modules/echarts/theme/infographic.js';
    import data from '../../../static/data/data1.json';
    const cityOptions = ['数据分析师', '数据架构师', '数据产品经理', '数据工程师','数据库管理','数据挖掘师','算法工程师'];
    export default {
        data() {
            return {
                chart: null,
                checkedCities1: ['数据分析师', '数据架构师'],
                checkData:[{}],
                tradeData:[],
                tradeNum:[],
                input1: '',
                cities: cityOptions
            };
        },
        methods: {
            addCity(){
                let flag = 0
                for(let i = 0; i < cityOptions.length; i++){
                    if(cityOptions[i] == this.input1)
                        flag = 1
                }
                if(flag == 0)
                    cityOptions.push(this.input1)
            },
            getData3(){
                let obj={}
                let url = BASE_URL + 'TitleInfo'
                obj.trade = this.checkedCities1
                obj.name = this.input1
                let json = JSON.stringify(obj)
                //alert(json)
                this.$http.post(url,json).then(function (data) {
                    this.checkData= data.data
                    for(let i = 0; i < this.checkData.length; i++){
                        this.tradeData[i]=this.checkData[i].name
                        this.tradeNum[i] = this.checkData[i].value
                    }
                    console.log(this.checkData)
                    console.log(this.tradeData)
                    console.log(this.tradeNum)
                    if (document.body.clientWidth < 560) {
                        this.drawpie('interestpie', 30, 100, '70%');
                    } else {
                        this.drawpie('interestpie', 60, 240, '60%');
                    }
                }).catch(function (_error) {
                    this.$message({
                        message:'网络请求失败',
                        type:'error'
                    })
                    console.log(_error)
                })
                //alert(this.checkedCities1)
            },
            drawpie(id, small, big, centery) {
                this.chart = echarts.init(document.getElementById(id), 'infographic');
                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 10
                    },
                    legend: {
                        orient: 'vertical',
                        left: 5,
                        top: 10,
                        data: this.checkData/*data.interest.course*/,
                    },
                    calculable: true,
                    series: [
                        {
                            name: '需求量',
                            type: 'pie',
                            radius: [small, big],
                            center: ['55%', centery],
                            roseType: 'radius',
                            data: this.checkData/*data.interest.courseInter*/,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffset: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            drawbar(id, gap, barwidth) {
                this.chart = echarts.init(document.getElementById(id), 'infographic');
                this.chart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            dataView: {}
                        },
                        right: 15,
                        top: 10
                    },
                    xAxis: {
                        data: data.interest.course,
                        axisLabel: {
                            textStyle: {
                                color: '#dcf7a1',
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        name: '人数',
                        nameLocation: 'middle',
                        nameGap: gap,
                        nameTextStyle: {
                            fontWeight: 200,
                            fontSize: 14
                        },
                        max: 20,
                        axisLine: {
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: data.interest.courseData,
                            barWidth: barwidth,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 20,
                                    color: '#dcf7a1',
                                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                                    shadowBlur: 20
                                }
                            }
                        }
                    ]
                });
            }
        },
        mounted() {

            this.$nextTick(function() {
                /*if (document.body.clientWidth < 560) {
                 this.drawpie('interestpie', 30, 100, '70%');
                 } else {
                 this.drawpie('interestpie', 60, 240, '60%');
                 }*/
                this.getData3();
            });
        }
    }
</script>
<style scoped>
    text{
        color: red;
    }
    #interestpie{
        position: relative;
        left: 50%;
        width: 90%;
        height: 620px;
        margin-left: -45%;
        border: solid #00AD7C 1px;
        box-shadow: 0 0 8px #52D681;
        border-radius: 10px;
    }
    @media screen and (max-width: 560px) {
        #interestpie {
            height: 500px;
        }
    }
</style>
